// 左边下部折线图
// 车流
<template>
    <div class="line-chart" ref="line">   
    </div>
</template>

<script>
import echartMixins from '@/utils/resizeMixins'

export default {
    data(){
        return{
            chart:null
        }
    },
    mixins:[echartMixins],
    mounted(){
        this.draw()
    },
    methods:{
        draw(){
            this.chart = this.$echarts.init(this.$refs.line)
            let option = {
                title: {
                    text: '',
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    },
                    formatter: function (params) {
                        var tar;
                        if (params[1].value !== '-') {
                            tar = params[1];
                        }
                        else {
                            tar = params[0];
                        }
                        return tar.name + '<br/>' + tar.seriesName + ' : ' + tar.value;
                    }
                },
                legend: {
                    data: ['支出', '收入']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    splitLine: {show: false},
                    axisLine: {
                        lineStyle: {
                            color: "#fff",
                        }
                    },
                    data: function () {
                        var list = [];
                        for (var i = 15; i <= 25; i++) {
                            list.push('11月' + i + '日');
                        }
                        return list;
                    }()
                },
                yAxis: {
                    type: 'value',
                    axisLine: {
                        lineStyle: {
                            color: "#fff",
                        }
                    }
                },
                series: [
                    {
                        name: '辅助',
                        type: 'bar',
                        stack: '总量',
                        itemStyle: {
                            barBorderColor: 'rgba(0,0,0,0)',
                            color: 'rgba(0,0,0,0)'
                        },
                        emphasis: {
                            itemStyle: {
                                barBorderColor: 'rgba(0,0,0,0)',
                                color: 'rgba(0,0,0,0)'
                            }
                        },
                        data: [0, 900, 1245, 1530, 1376, 1376, 1511, 1689, 1856, 1495, 1292]
                    },
                    {
                        name: '收入',
                        type: 'bar',
                        stack: '总量',
                        label: {
                            show: true,
                            position: 'top'
                        },
                        data: [900, 345, 393, '-', '-', 135, 178, 286, '-', '-', '-']
                    },
                    {
                        name: '支出',
                        type: 'bar',
                        stack: '总量',
                        label: {
                            show: true,
                            position: 'bottom'
                        },
                        data: ['-', '-', '-', 108, 154, '-', '-', '-', 119, 361, 203]
                    }
                ]
            }
            this.chart.setOption(option)
        }
    }
}
</script>

<style lang="scss" scoped>
.line-chart{
    width: 100%;
    height: 100%;
}
</style>